<template lang="pug">
.wrap
  .moban(v-if="setBler")
  .miquanHeader
    img(src="../../src/assets/img/user.png", alt="alt")
    .titleBox
      span.setLike(
        :class="titleIndex == 1 ? 'active' : ''",
        @click="titleIndex = 1"
      ) 关注
      span.cheackBast(
        :class="titleIndex == 2 ? 'active' : ''",
        @click="titleIndex = 2"
      ) 广场
    img(src="../../src/assets/img/lingdang.png", alt="alt")
  .mainBox(v-for='(d,i) in list')
    miBox(:list="d.user")
    .btBox
      .footerImgBox
        .lodelBox
          img(src="../../src/assets/img/fenxiang.png", alt="alt")
        .lodelBox(@click="setPl(d.pl)")
          img(src="../../src/assets/img/评论.png", alt="alt")
          span {{d.pl.userList.length}}
        .lodelBox
          img(src="../../src/assets/img/good.png", alt="alt")
          span 9
    SpringFrame(v-if='show',:obj="setObj",@close="show = false")
</template>

<script>
import miBox from "../components/miBox.vue";
import SpringFrame from "../components/SpringFrame.vue";
export default {
  data() {
    return {
      titleIndex: 2,
      setBler: false,
      list:null,
      setObj:null,
      show:false
    };
  },
  components: {
    miBox,
    SpringFrame
  },
  created(){
    this.$http.get('/ajaxdata/mifigTo/index.json').then(({data})=>{
      console.log(data.list)
      this.list = data.list
    })
  },
  methods:{
    setPl(obj){
      this.show = true
      this.setObj = obj.userList
    }
  }
};
</script>
<style lang="sass" scoped>
.wrap
  width: 3.75rem
  .moban
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    background: rgba(0,0,0,.4)
    z-index: 2
  .miquanHeader
    width: 100%
    height: .5rem
    display: flex
    justify-content: space-between
    align-items: center
    position: fixed
    left: 0
    top: 0
    background: #fff
    z-index: 5
    img
      width: .3rem
      height: .3rem
      margin: 0 .1rem

    .titleBox
      width: 1rem
      height: 100%
      line-height: .5rem
      span
        width: 50%
        float: left
        text-align: center
        font-weight: bolder
        color: #ccc

      .active
        color: #000
        &::before
          content: ""
          position: absolute
          bottom: .05rem
          width: .08rem
          height: .02rem
          background: #000
          margin-left: .1rem
  .mainBox
    width: 100%
    .btBox
      width: 100%
      height: .6rem
      .footerImgBox
        width: 100%
        height: 100%
        display: flex
        align-items: center
        .lodelBox
          width: 33%
          display: flex
          align-items: center

          img
            width: .2rem
            height: .2rem
            margin-left: .30rem
          span
            padding-left: .1rem
            font-size: .13rem
</style>
